<template>
	<uni-forms-item label="所在地" name="location">
		<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
		    <!-- :clearable="false" 取消input输入框的清楚图标 -->
		    <uni-easyinput :clearable="false" v-model="select"></uni-easyinput>
		</picker>
	</uni-forms-item>
</template>
 
 
<script>
	// import provinceData from "@/common/porivinceData.js"
 // 
	export default {
		data() {
			return {
				form: {},
				oldpProvinceDataList: provinceData.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '',   //省市区绑定值
			}
		},
		onLoad() {
			this.getUser()
 
			// console.log(this.oldpProvinceDataList);
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				// console.log(this.oldpProvinceDataList[i].name);
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				// console.log(this.oldpProvinceDataList[0].city[i].name)
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				// console.log(this.oldpProvinceDataList[0].city[0].area)
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
			// console.log(this.newProvinceDataList)
		},
		methods: {
			getUser() {
				var that = this
				getUserInfo(uni.getStorageSync('openId')).then(response => {
					this.form = response.data
					// 当form表单中地址不为空或者不为null的时候，那么就显示表单中选择的字段，相反就显示请选择省市区
					this.form.location != "" && this.form.location != null ? this.select = this.form.location :
						this.select = "请选择省市区"
				})
			},
 
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}-${this.newProvinceDataList[1][this.multiIndex[1]]}-${this.newProvinceDataList[2][this.multiIndex[2]]}`
				console.log('确定地市：', this.select);
                //将确定的地市信息保存到form表单中
				this.form.location = this.select
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						// console.log(item)
						return item.name
					})
					// console.log(this.multiIndex)
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							// console.log(item)
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							// console.log(item)
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							// console.log(item)
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			},
 
		}
	}
</script>